<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>{$title}</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        border: none;
    }
</style>
<body>
<div>
    <canvas id="pdf-canvas"></canvas>
</div>
<!--引入pdf库文件-->
<script src="https://oss.goddessxzns.com/astrologer_app/1.2.0/zhunle_api_astrologer_app_invoice_view_static/pdf.js"></script>
<script src="https://oss.goddessxzns.com/astrologer_app/1.2.0/zhunle_api_astrologer_app_invoice_view_static/pdf.worker.js"></script>
<script>
    // 获取 PDF 文档
    const pdfUrl = '{$pdf_url}';

    // 获取 canvas 元素
    const canvas = document.getElementById('pdf-canvas');

    // 用 pdf.js 渲染 PDF 文档
    pdfjsLib.getDocument({
        url: pdfUrl,
        cMapUrl: 'https://oss.goddessxzns.com/astrologer_app/1.2.0/zhunle_api_astrologer_app_invoice_view_static/cmaps/',
        cMapPacked: true
    }).promise.then(function (pdfDoc) {
        pdfDoc.getPage(1).then(function (page) {
            const viewport = page.getViewport({scale: 1});
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            page.render({
                canvasContext: context,
                viewport: viewport
            });
        });
    });
</script>
</body>
</html>
